<template>
    <view @click.stop="swtich" class="check-box margin-right-sm sm" :class="[{ checked: modelValue }]"></view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

const props = withDefaults(defineProps<{ modelValue: boolean; size?: string }>(), {
    modelValue: false,
    size: "40rpx"
});
const emit = defineEmits(["update:modelValue", "change"]);

const swtich = () => {
    emit("update:modelValue", !props.modelValue);
    emit("change", !props.modelValue);
};

onMounted(() => {});

const size = props.size;
</script>

<style lang="scss" scoped>
.check-box {
    width: v-bind(size);
    height: v-bind(size);
}
</style>
